基礎佈局網格與材質(指南)

網格佈局 Layout Grids

錶盤式檢視(Dial-based Views)、資訊圖檢視(Infographic Views) 和 列表檢視(Lists)

很多種類尺寸,尺寸越大,硬體邊緣越圓滑,佈局網格可以適配任何尺寸

1 錶盤式檢視(Dial-based Views)

適合展示密集資訊,讓使用者快速獲取資料。全屏的顏色和影象(如天氣)能增強介面的視覺效果。

錶盤檢視 還允許你在四個角落新增最多 4 個互動控制元件,同時不會遮擋主要內容。

2資訊圖檢視(Infographic Views)

適用於圖表、統計資料和視覺化資訊,通常搭配文字和指標資料,以提供更完整的資訊展示。

3 列表檢視(Lists)

適用於滾動瀏覽內容,讓使用者快速找到所需的資訊。

這套網格系統,是為了充分利用每一個畫素,並確保 Apple Watch 所有應用的體驗更加一致和可預測。

https://developer.apple.com/design/resources/#watchos-apps

顏色和材質 materials and color

其中一個重要的設計目標,就是透過全屏顏色和影象來突出螢幕的形態和高精度顯示效果。

1 四種全屏材質背景:

超薄(Ultra Thin)、薄(Thin)、普通(Regular)和厚(Thick)

2 全屏背景漸變色

在健身應用中,我們使用主題色來區分 “移動”、“鍛鍊” 和 “站立” 這三個頁面,它們的佈局相似,但顏色不同,便於使用者快速識別。

顏色能幫你秒懂資訊!在"世界時鐘"裡,早晨顯示黃色,晚上顯示深藍色。顏色也能表示狀態變化,比如計時器從黑色倒計時變成亮橙色提醒。

3 活力填充材質(Vibrant Fill Materials)

適用於控制元件 和 資訊卡片,同時引入了 四個不同層級的文字樣式,包括:

4 全屏模糊材質(Full-Screen Thin Material)

帶有輕微透明度的背景模糊效果,可以在彈出視窗或過渡頁面中使用。讓使用者更清楚自己處於哪個介面,不會迷失方向

5 導航欄“動態模糊”效果:

你滾動介面時,導航欄下方的內容會逐漸變模糊,而不是突然被“硬切換”掉。這樣可以讓使用者更專注於當前閱讀的內容,同時仍然知道導航欄的位置。